<template>
  <div>
    <div class="ccui-multifunctional-table-wrapper">
      <el-table
        :data="settlementList"
        class="ccui-form-child-table"
        border
        show-summary
        :summary-method="getSummaries"
        @select="listSelectTable"
        @select-all="listSelectTable"
        :row-class-name="tableRowClassName"
      >
        <!--        <el-table-column type="selection" width="55" align="center" />-->

        <el-table-column
          show-overflow-tooltip
          label="序号"
          type="index"
          align="center"
          width="55"
          fixed
        />

        <el-table-column
          show-overflow-tooltip
          prop="materialCode"
          label="设备物资编码"
          width="110"
          fixed
        >
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="materialName"
          label="设备物资名称"
          width="300"
          fixed
        >
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="materialState"
          label="设备物资说明"
          width="130"
        >
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="measureUnit"
          label="计量单位"
          width="90"
        >
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="acceptTime"
          label="验收日期"
          width="100"
        >
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="acceptCount"
          label="剩余可结算数量"
          width="130"
        />

        <el-table-column
          show-overflow-tooltip
          prop="writeoffCount"
          label="冲销数量"
          width="100"
        >
        </el-table-column>
        <!-- <el-table-column
                          show-overflow-tooltip
                          prop="settlementCountTotal"
                          label="累计结算数量"
                        >
                        </el-table-column> -->

        <!-- <el-table-column show-overflow-tooltip prop="taxRate" label="税率">
                        </el-table-column> -->

        <el-table-column
          show-overflow-tooltip
          prop="unitPriceWithTax"
          label="含税单价"
          width="130"
        >
        </el-table-column>

        <!-- <el-table-column
                          show-overflow-tooltip
                          prop="moneyWithoutTax"
                          label="不含税单价(元)"
                        >
                        </el-table-column> -->

        <el-table-column
          show-overflow-tooltip
          prop="moneyWithTax"
          label="冲销金额"
          width="130"
        >
        </el-table-column>
        <!-- <el-table-column
                          show-overflow-tooltip
                          prop="moneyWithoutTax"
                          label="不含税金额(元)"
                        >
                        </el-table-column> -->
        <!-- <el-table-column
                          show-overflow-tooltip
                          prop="settlementMoneyTotal"
                          label="累计结算金额"
                        >
                        </el-table-column> -->

        <!-- <el-table-column
                          show-overflow-tooltip
                          prop="moneyWithoutTax"
                          label="累计结算不含税金额"
                        >
                        </el-table-column> -->

        <el-table-column
          show-overflow-tooltip
          prop="brand"
          label="生产厂家/品牌"
          width="130"
        >
        </el-table-column>
      </el-table>
    </div>

    <chooseMaterials
      ref="materialsFormVisible"
      @handleSelect="handleSelect"
      :chooseMaterialsBtn="chooseMaterialsBtn"
    />
  </div>
</template>

<script>
import chooseMaterials from "@/basa/components/public/chooseMaterials";
// import { listPursckinfoPage } from "../api";
import jsList from "../js";

export default {
  name: "financeInfoCheck",
  components: { chooseMaterials },
  props: {
    settlementList: {
      type: Array
    }
  },
  data() {
    return {
      jsList,
      // settlementList: [
      //   {
      //     materialCode: "B4343434434",
      //     materialName: "物资名称1",
      //     materialName1: "设备物资说明",
      //     specifications: "中交二航局",
      //     specificationsdate: "2021-04-22",
      //     specificationsnum: 33,
      //     measuringUnit: 44,
      //     measuringUnit2: 55,
      //     measuringUnit1: 77,
      //     measuringUnit3: "uiui"
      //   },
      //   {
      //     materialCode: "B4343434434",
      //     materialName: "物资名称1",
      //     materialName1: "设备物资说明",
      //     specifications: "中交二航局",
      //     specificationsdate: "2021-04-22",
      //     specificationsnum: 33,
      //     measuringUnit: 44,
      //     measuringUnit2: 55,
      //     measuringUnit1: 77,
      //     measuringUnit3: "uiui"
      //   },
      //   {
      //     materialCode: "B4343434434",
      //     materialName: "物资名称1",
      //     materialName1: "设备物资说明",
      //     specifications: "中交二航局",
      //     specificationsdate: "2021-04-22",
      //     specificationsnum: 33,
      //     measuringUnit: 44,
      //     measuringUnit2: 55,
      //     measuringUnit1: 77,
      //     measuringUnit3: "uiui"
      //   }
      // ],
      listTableData: [],
      materialVisible: false,
      chooseMaterialsBtn: 0 // 点击选择物资按钮时为true
    };
  },
  created() {},
  mounted() {},
  activited() {},
  update() {},
  methods: {
    // 采购计划选择确认
    planConfirm(data) {
      console.log("采购计划选中行==>>", data);
    },
    // 采购方案选择确认
    programmeConfirm(data) {
      console.log("采购方案选中行==>>", data);
    },
    // 选择材料
    handleChooseMaterials() {
      // 打开新增物资清单页面
      this.$refs.materialsFormVisible.dialogFormVisible = true;
      this.chooseMaterialsBtn++;
    },
    // 采购清单选中数据
    listSelectTable(val) {
      this.listTableData = val;
    },
    handleSelect(row) {},
    // 选择验收单
    numrow(row) {
      this.settlementList.push({
        materialCode: row.materialCode,
        materialName: row.materialName,
        materialName1: row.materialName1,
        measuringUnit: row.measuringUnit,
        measuringUnit1: row.measuringUnit1,
        measuringUnit2: row.measuringUnit2,
        measuringUnit3: row.measuringUnit3,
        specifications: row.specifications,
        specificationsdate: row.specificationsdate,
        specificationsnum: row.specificationsnum
      });
    },
    // 合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              if (
                column.label == "验收数量" ||
                column.label == "冲销数量" ||
                column.label == "含税单价" ||
                column.label == "冲销金额"
              ) {
                return prev + curr;
              }
            } else {
              return prev;
            }
          }, 0);
          if (column.label == "验收数量") {
            sums[index] = this.calculateFilter(sums[index]);
          }
          if (column.label == "冲销数量") {
            sums[index] = this.numberFilter(sums[index]);
          }
          if (column.label == "含税单价") {
            sums[index] = this.calculateFilter(sums[index]);
          }
          if (column.label == "冲销金额") {
            sums[index] = this.calculateFilter(sums[index]);
          }
        } else {
          sums[index] = "";
        }
      });
      return sums;
    },
    // 金额四舍五入 8位小数
    calculateFilter(data) {
      if (data || data == 0) {
        if ((data + "").indexOf(".") != -1) {
          let newData = (data + "").substring(0, (data + "").indexOf(".") + 9);
          return newData;
        } else {
          return data;
        }
      } else {
        return "";
      }
    },
    // 金额四舍五入
    numberFilter(data) {
      if (data || data == 0) {
        if ((data + "").indexOf(".") != -1) {
          let newData = (data + "").substring(0, (data + "").indexOf(".") + 4);
          return newData;
        } else {
          return data;
        }
      } else {
        return "";
      }
    },

    tableRowClassName(data) {
      if (data.row.isMerge == 1 && data.row.isMainInventory == 0) {
        return "hidden-row";
      }
      return "";
    }
  },
  filter: {},
  computed: {},
  watch: {}
};
</script>

<style lang="scss" scoped>
/deep/ .ccui-multifunctional-table-wrapper {
  .el-table td,
  .el-table th.is-leaf {
    border-right: 1px solid #edf2fc;
  }
}

.ml {
  margin-left: 10px;
}

.operation-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}

/deep/
  .ccui-multifunctional-table-wrapper
  .el-table
  tbody
  tr
  td:first-child
  .cell {
  border-right: 1px solid #f1f1f1;
}

.deleteLine {
  padding: 0 20px;
  height: 30px;
  background: #f7f9ff;
  border: 1px solid #0089ef;
  border-radius: 4px;
  position: relative;
  color: #0089ef;
  margin-left: 10px;
}

/deep/ .hidden-row {
  display: none;
}

///deep/ .el-table__body-wrapper {
//  z-index: 1;
//}
/deep/ .el-table__fixed-header-wrapper {
  th {
    pointer-events: auto;
  }
}

/deep/ .el-table__fixed,
/deep/ .el-table__fixed-right {
  pointer-events: none;

  td {
    pointer-events: auto;
  }
}
</style>
